<template>
    <div>
        <input  v-model="keyword" @input='fd($event.target)' maxlength="15"
                 placeholder="输入你感兴趣的内容吧!" autocomplete="off" @keyup.enter="search_(keyword)"/>
        <div id="Fun">
            <p>{{15-length}}</p>
            <font-awesome-icon icon="magnifying-glass" @click="search_(keyword)" />
         </div>
    </div>
</template>
<script>
import {mapActions,mapMutations} from 'vuex'
  export default 
  {
     name :'', 
     data() {
        return {
            keyword:'',
            length:0,
            timer:null,
        }
     },
     methods: {
        ...mapActions('Search',['search','getSearchResult']),
        ...mapMutations('Search',['SETSEARCHPROCESS','SETKEYWORD','SETNAVIINDEX','SEARCHDOWN']),
        search_(keyword){
            if(this.keyword=='')
            return
            this.search(keyword)

           
            this.keyword=''
            this.length=0
            this.SETSEARCHPROCESS(0)

            
            this.SETNAVIINDEX(1)
            this.SEARCHDOWN()
            this.$router.push('/search',()=>{})
           
           

        },
        getLength(e){
        
			    this.length = e.value.trimLeft().length
			    this.keyword = e.value.trimLeft()
          this.SETKEYWORD(this.keyword)

          if(this.length>0){
             this.SETSEARCHPROCESS(1)
             this.getSearchResult(this.keyword)
          }
          else this.SETSEARCHPROCESS(0)
        },
        fd(e) {
				if (this.timer) clearTimeout(this.timer)
				 this.timer = setTimeout(() => {
					this.getLength(e)
				 }, 200)
			},
     
     },
  }
</script>
<style scoped lang='less'>


  input{
    width: 85%;
    color: white;
    font-size: 20px;
    letter-spacing: 2px;
  }

  #Fun{
    width: 15%;
    min-width: 60px;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
</style>